<template>
  <div class="parent-view">
    <div class="parent-card">
      <p>parent - 父组件</p>
      <p v-if="childName">正在被{{ childName }}子元素调用</p>
      <van-button plain type="primary" @click="getComponentOne"
        >调用childOne</van-button
      >
      <van-button plain type="primary" @click="getComponentToo"
        >调用ChildToo</van-button
      >
    </div>
    <childOne></childOne>
    <childToo></childToo>
    <div class="msg-info">
      <p>提示：</p>
      <p>
        1.指定已创建的实例之父实例，在两者之间建立父子关系。子实例可以用
        this.$parent 访问父实例，子实例被推入父实例的 $children 数组中。
      </p>
      <p>
        2.节制地使用 $parent 和 $children -
        它们的主要目的是作为访问组件的应急方法。更推荐用 props 和 events
        实现父子组件通信
      </p>
    </div>
  </div>
</template>
<script>
import childOne from "./children/childOne.vue";
import childToo from "./children/childToo.vue";
export default {
  components: { childOne, childToo },
  data() {
    return {
      childName: "",
    };
  },
  methods: {
    setChildText(val) {
      this.childName = val;
    },
    getComponentOne() {
      // console.log(this.$children, '=============getComponent'); //此时会打印出一个数组，里面是两个子元素
      this.$children[0] && this.$children[0].getChildOne();
    },
    getComponentToo() {
      this.$children[1] && this.$children[1].getChildToo();
    },
  },
};
</script>
<style lang="scss">
.parent-view {
  overflow: hidden;
  .parent-card {
    margin: 20px 10px;
    padding: 10px;
    background-color: #fff;
    border-radius: 8px;
  }
  .van-button {
    margin-left: 10px;
  }
  .msg-info {
    font-size: 14px;
    margin: 20px 10px;
    padding: 10px;
    background-color: #fff;
    border-radius: 8px;
  }
}
</style>